<template>
  <div class="order">
    <div>
      <div style="display: flex; justify-content: space-between">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label='合同编号'>
            <el-input v-model='formInline.contract'></el-input>
          </el-form-item>
          <el-form-item label='单位名称'>
            <el-input v-model='formInline.companyName'></el-input>
          </el-form-item>
          <el-form-item label='合同状态'>
            <el-input v-model='formInline.contractStatus'></el-input>
          </el-form-item>
          <el-form-item label='合同名称'>
            <el-input v-model='formInline.contractName'></el-input>
          </el-form-item>

          <el-form-item label='开始时间'>
            <el-date-picker
              v-model="formInline.value1"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions0">
            </el-date-picker>
          </el-form-item>

          <el-form-item label='结束时间'>
            <el-date-picker
              v-model="formInline.value2"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions1">
            </el-date-picker>
          </el-form-item>

          <el-form-item label='经办人'>
            <el-input v-model='formInline.agent'></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="searchList">查询</el-button>
            <el-button type="primary" @click="addRole" class='addBtn'>新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-tabs type="border-card">
        <el-tab-pane label="合同明细(有效)">
          <!--合同（有效）-->
          <div class="tables" >
            <el-table ref="table1" :data="table1" tooltip-effect="dark" style="width: 100%" @selection-change="">
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="contract" label="合同编号">
              </el-table-column>
              <el-table-column prop="ownerName" label="甲方单位名称">
              </el-table-column>
              <el-table-column prop="vendorName" label="乙方单位名称">
              </el-table-column>
              <el-table-column prop="agent" label="经办人">
              </el-table-column>
              <el-table-column prop="contractName" label="合同名称">
              </el-table-column>
              <el-table-column prop="contractDescription" label="合同描述">
              </el-table-column>
              <el-table-column prop="startTime" label="开始时间">
              </el-table-column>
              <el-table-column prop="endTime" label="结束时间">
              </el-table-column>
              <el-table-column prop="state" label="状态">
              </el-table-column>
              <el-table-column prop="audit" label="审核">
                 Q
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                  <el-button @click="table1Preview(scope.row,1)" type="text" size="small">预览</el-button>
                  <el-button @click="table1Download(scope.row,2)" type="text" size="small">下载</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="合同明细(已过期)">
          <!--合同过期-->
          <div class="tables" >
            <el-table ref="table2" :data="table2" tooltip-effect="dark" style="width: 100%" @selection-change="">
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="contract" label="合同编号">
              </el-table-column>
              <el-table-column prop="name" label="单位名称">
              </el-table-column>
              <el-table-column prop="agent" label="经办人">
              </el-table-column>
              <el-table-column prop="contractName" label="合同名称">
              </el-table-column>
              <el-table-column prop="contractDescription" label="合同描述">
              </el-table-column>
              <el-table-column prop="startTime" label="开始时间">
              </el-table-column>
              <el-table-column prop="endTime" label="结束时间">
              </el-table-column>
              <el-table-column prop="state" label="状态">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                  <el-button @click="table2Preview(scope.row,1)" type="text" size="small">预览</el-button>
                  <el-button @click="table2Download(scope.row,2)" type="text" size="small">下载</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div>

    </div>
  </div>
</template>
<script>
  export default {
    inject: ['reload'],
    data() {
      return {
        table1: [
          {
            id:'1',
            contract:'1902-HW49-00001',
            ownerName:'纽创产废单位A',
            vendorName:'纽创运营单位',
            agent:'小毛',
            contractName:'HW49处置合同',
            contractDescription:'HW49-1年集中处置合同',
            startTime:'2018-02-22',
            endTime:'2019-02-22',
            state:'有效',
            audit:'审核中'
          }
        ],
        table2: [
          {
            id:'1',
            contract:'1902-HW49-00001',
            name:'产废单位',
            agent:'小毛',
            contractName:'HW49处置合同',
            contractDescription:'HW49-1年集中处置合同',
            startTime:'2018-02-22',
            endTime:'2019-02-22',
            state:'合同中'
          }
        ],

        formInline: {
          contract: '',
          companyName: '',
          contractStatus:'',
          contractName:'',
          agent:'',
          value1: '',
          value2:'',
        },
        currentPage: 1,
        total: 10,
        page: 1,
        limit: 10,
      }

    },
    mounted() {
      this.searchResult()

    },
    methods: {
      searchResult() {
      },
      //时间选择
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      pickerOptions1:{
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      //查询
      searchList() {
        this.searchResult()
      },
      //新增
      addRole() {
      },

      handleSizeChange(val) {

        this.limit = val;
        this.searchResult()
      },

      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val;
        this.searchResult()
      },
      //table1预览
      table1Preview(row) {

      },
      //table1下载
      table1Download(){

      },
      //table2预览
      table2Preview(row) {

      },
      //table2下载
      table2Download(){

      },

      //修改
      handleEdit(row, type) {
      },
      //返回
      goBack() {

        this.reload()
      },

      //删除
      deleteRole(row) {
        console.log(row)
        this.$common.$ajax('/sys/role/delete', [row.id], 'post').then(res => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1000
          })
          this.reload()
        })
      },
    },
    components: {}
  }

</script>
<style lang="scss">
  .order {
    padding-top: 30px;
  }

  .tables {
    margin-top: 20px;
  }

  .addBtn {
    height: 40px !important;
  }

  .wrapper {
    display: flex;
    justify-content: space-between;

    .menuListTree {
      width: 50%;
    }

    .roleViews {
      width: 50%;
    }
  }
  .cut{
    border-top: 1px solid #cccccc;
    padding-top: 10px;
  }

</style>
